<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    昨日新增用户
                    <span class="layui-badge layui-bg-blue layuiadmin-badge">日</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">
                        {$statistics_yesterday != "" ? $statistics_yesterday.regist_ios+$statistics_yesterday.regist_android : 0}</p>
                    <p>
                        今日新增用户
                        <span class="layuiadmin-span-color">{$statistics_today != "" ? $statistics_today.regist_ios+$statistics_today.regist_android : 0} <i class="layui-inline layui-icon layui-icon-user"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    今日活跃用户
                    <span class="layui-badge layui-bg-blue layuiadmin-badge">日</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{$statistics_today != "" ? $statistics_today.activity_ios+$statistics_today.activity_android : 0}</p>
                    <p>
                        今日APP启动次数
                        <span class="layuiadmin-span-color">{$statistics_today != "" ? $statistics_today.launch_ios+$statistics_today.launch_android : 0} <i class="layui-inline layui-icon layui-icon-cellphone-fine"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    本月新增
                    <span class="layui-badge layui-bg-green layuiadmin-badge">月</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">

                    <p class="layuiadmin-big-font">{$month_ios+$month_android}</p>
                    <p>
                        全站总用户量
                        <span class="layuiadmin-span-color">{$user_count} <i class="layui-inline layui-icon layui-icon-user"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    今日营收
                    <span class="layui-badge layui-bg-orange layuiadmin-badge">日</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">

                    <p class="layuiadmin-big-font">{$amount_today}</p>
                    <p>
                        本月营收
                        <span class="layuiadmin-span-color">{$amount_month} <i class="layui-inline layui-icon layui-icon-rmb"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-header">
                    数据统计
                </div>
                <div class="layui-card-body">
                    <div class="layui-row">
                        <div class="layui-col-sm6">
                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-heapline">
                                <div carousel-item id="LAY-index-heapline-user">
                                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-sm6">
                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-heapline">
                                <div carousel-item id="LAY-index-heapline-activity">
                                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-sm5">
                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-heapline">
                                <div carousel-item id="LAY-index-cycle-platform">
                                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-sm6 layui-col-md-offset1">
                            <p class="layuiadmin-normal-font">数据分析</p>
                            <div class="layui-card-body layadmin-takerates" style="margin-left: 50px;">
                                <div class="layui-progress" lay-showPercent="yes">
                                    <h3>订单成交比例（月）</h3>
                                    <div class="layui-progress-bar" lay-percent="{$order_succ_rate_month}%"></div>
                                </div>
                                <div class="layui-progress" lay-showPercent="yes">
                                    <h3>订单成交比例（总）</h3>
                                    <div class="layui-progress-bar" lay-percent="{$order_succ_rate}%"></div>
                                </div>
                                <div class="layui-progress" lay-showPercent="yes">
                                    <h3>用户在线比例（实时）</h3>
                                    <div class="layui-progress-bar" lay-percent="{$user_online_rate}%"></div>
                                </div>
                                <div class="layui-progress" lay-showPercent="yes">
                                    <h3>主播在线比例（实时）</h3>
                                    <div class="layui-progress-bar" lay-percent="{$anchor_online_rate}%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function(){
        //区块轮播切换
        layui.use(['admin', 'carousel'], function(){
            var $ = layui.$
                ,admin = layui.admin
                ,carousel = layui.carousel
                ,element = layui.element
                ,device = layui.device();

            //轮播切换
            $('.layadmin-carousel').each(function(){
                var othis = $(this);
                carousel.render({
                    elem: this
                    ,width: '100%'
                    ,arrow: 'none'
                    ,interval: othis.data('interval')
                    ,autoplay: othis.data('autoplay') === true
                    ,trigger: (device.ios || device.android) ? 'click' : 'hover'
                    ,anim: othis.data('anim')
                });
            });

            element.render('progress');

        });

        //折线图1
        layui.use(['carousel', 'echarts', 'admin'], function () {
            var $ = layui.$
                , admin = layui.admin
                , carousel = layui.carousel
                , echarts = layui.echarts;

            //堆积折线图
            var echheapline = [], heapline = [
                {
                    title: {
                        text: '本月用户趋势',
                        x: 'left',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['','']
                    },
                    xAxis : [{
                        type : 'category',
                        boundaryGap : false,
                        data: [{$month_day}]
                    }],
                    yAxis : [{
                        type : 'value'
                    }],
                    series : [{
                        name:'新增注册',
                        type:'line',
                        smooth:true,
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data: [{$month_regist_array}]
                    }]
                },
            ]
                , elemheapline = $('#LAY-index-heapline-user').children('div')
                , renderheapline = function (index) {
                    echheapline[index] = echarts.init(elemheapline[index], layui.echartsTheme);
                    echheapline[index].setOption(heapline[index]);
                    // window.onresize = echheapline[index].resize;
                    admin.resize(function(){
                        echheapline[index].resize();
                    });
                };
            if (!elemheapline[0]) return;
            renderheapline(0);
        });
        //折线图2
        layui.use(['carousel', 'echarts', 'admin'], function () {
            var $ = layui.$
                , admin = layui.admin
                , carousel = layui.carousel
                , echarts = layui.echarts;

            //堆积折线图
            var echheapline = [], heapline = [
                {
                    title: {
                        text: '本月活跃趋势',
                        x: 'left',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['','']
                    },
                    xAxis : [{
                        type : 'category',
                        boundaryGap : false,
                        data: [{$month_day}]
                    }],
                    yAxis : [{
                        type : 'value'
                    }],
                    series : [{
                        name:'启动次数',
                        type:'line',
                        smooth:true,
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data: [{$month_launch_array}]
                    },{
                        name:'活跃用户',
                        type:'line',
                        smooth:true,
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data: [{$month_activity_array}]
                    }]
                },
            ]
                , elemheapline = $('#LAY-index-heapline-activity').children('div')
                , renderheapline = function (index) {
                echheapline[index] = echarts.init(elemheapline[index], layui.echartsTheme);
                echheapline[index].setOption(heapline[index]);
                // window.onresize = echheapline[index].resize;
                admin.resize(function(){
                    echheapline[index].resize();
                });
            };
            if (!elemheapline[0]) return;
            renderheapline(0);
        });

        //折线图3
        layui.use(['carousel', 'echarts', 'admin'], function () {
            var $ = layui.$
                , admin = layui.admin
                , carousel = layui.carousel
                , echarts = layui.echarts;

            var echheapline = [], heapline = [
                {
                    title : {
                        text: '用户平台分布',
                        x: 'left',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient : 'vertical',
                        x : 'right',
                        y : 'center',
                        data:['PC','iOS','安卓']
                    },
                    series : [{
                        name:'用户平台',
                        type:'pie',
                        radius : '55%',
                        center: ['50%', '50%'],
                        data:[
                            {$user_platform_count}
                        ]
                    }]
                },
            ]
                , elemheapline = $('#LAY-index-cycle-platform').children('div')
                , renderheapline = function (index) {
                echheapline[index] = echarts.init(elemheapline[index], layui.echartsTheme);
                echheapline[index].setOption(heapline[index]);
                // window.onresize = echheapline[index].resize;
                admin.resize(function(){
                    echheapline[index].resize();
                });
            };
            if (!elemheapline[0]) return;
            renderheapline(0);
        });
    });
</script>
</body>
</html>
